/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sfv-cascade-nav-menu-list-item"
         :class="{'sfv-cascade-nav-menu-list-item-collapse--active': isActive && isHover,
                  'sfv-cascade-nav-menu-list-item-expand--active': isActive && !isHover,
                  'sfv-nav-menu-list-item--disabled': isDisabled}"
         @click="clickItem">
        <div class="sfv-cascade-nav-menu-list-item_icon-wrapper">
            <div class="sfv-cascade-nav-menu-list-item_icon-wrapper-bg">
                <i v-if="icon"
                   :class="['sfv-nav-menu-list-item_icon', icon]"></i>
            </div>
        </div>
        <template>
            <span class="sfv-cascade-nav-menu-list-item-text">
                <slot></slot>
            </span>
        </template>
    </div>
</template>

<script>

/**
* 级联导航工具条item
* Created by ued on 2020/05/30.
*/

export default {
    name: 'SfCascadeNavMenuItem',

    props: {
        icon: String,
        isActive: {
            type: Boolean,
            default: false
        },
        isHover: {
            type: Boolean,
            default: false
        },
        isDisabled: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default () {
                return {};
            }
        }
    },

    data () {
        return {
        };
    },

    methods: {

        /**
         * 点击item
         * @param {Event} e 点击事件
         */
        clickItem (e) {
            if (!this.isDisabled) {
                this.$emit('click-item', e, this.data);
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .sfv-cascade-nav-menu .sfv-cascade-nav-menu-bar-wrapper .sfv-cascade-nav-menu_body .sfv-cascade-nav-menu-list-item-expand--active {
        color: #fff;
    }
    .sfv-cascade-nav-menu-list-item-expand--active {

        .sfv-cascade-nav-menu-list-item_icon-wrapper-bg {
            background: #204ED9;
            color: #FFF;
            height: 28px;
            width: 28px;
            display: inline-block;
            margin: auto;
            line-height: 28px;
            border-radius: 50%;
        }
    }
    .sfv-cascade-nav-menu-list-item {
        color: #fff;
    }
</style>
